<template>
	<!-- 此插件侍优化    组件原理是for+slot ,此种方法会会有错误提示 -->
	<view class="content">
		<!-- 此时使用了页面的滚动，z-paging不需要有确定的高度，use-page-scroll需要设置为true -->
		<!-- 注意注意！！这里的ref必须设置且必须等于"paging"，否则mixin方法无效 -->
		<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList" :auto="false">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->

			<slot v-for="(item,index) in dataList" name="cxPage" :item="item" :index="index">
			</slot>

			<!-- <cxView v-for="(item,index) in dataList" :key="index" name="cxPage">
				<slot :item="item" :index="index">
				</slot>

			</cxView> -->


		</z-paging>
	</view>
</template>

<script>
	/**
	 * tabList
	 * @description  tabList
	 * @example <cxPage  @getList="getData" :tabIndex="index" :currentIndex="current" :ref="'page' + index"
					v-slot:childPage="{index,item}">
					<cxCell :title="item.name" value="姓名" :ref="'cell'+index" :key="'cell'+index"></cxCell>


				</cxPage>
	 * 
	 * 
	 * 
	 */
	export default {
		name: 'cxPage',
		data() {
			return {
				dataList: [],
				firstLoaded: false

			}
		},
		options: {
			styleIsolation: 'shared', // 解除样式隔离
			multipleSlots: true

		},
		props: {
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			isCollection: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						//懒加载，当滑动到当前的item时，才去加载
						if (!this.firstLoaded) {
							setTimeout(() => {
								this.$refs.paging.reload();
							}, 10);
						}
					}
				},
				immediate: true
			},
		},
		methods: {
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				// const params = {
				// 	pageNo: pageNo,
				// 	pageSize: pageSize,
				// 	type: this.tabIndex + 1
				// }
				// this.$request.queryList(params).then(res => {
				// 	//将请求的结果数组传递给z-paging
				// 	this.$refs.paging.complete(res.data.list);
				// 	this.firstLoaded = true;
				// }).catch(res => {
				// 	//如果请求失败写this.$refs.paging.complete(false);
				// 	//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				// 	//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				// 	this.$refs.paging.complete(false);
				// })
				// setTimeout(()=>{
				// 		this.$refs.paging.complete([{name:'1'},{name:'1'},{name:'1'},{name:'1'},{name:'1'},{name:'1'},{name:'1'},{name:'1'},{name:'1'},{name:'1'}])
				// this.firstLoaded = true;
				// },500)
				this.$emit("getList", {
					pageNo: pageNo,
					pageSize: pageSize
				}, res => {
					this.$refs.paging.complete(res)
					this.firstLoaded = true;
				});
			},
			itemClick(item) {
				console.log('点击了', item.title);
			}
		}
	}
</script>

<style>
	.content {
		height: 100%;
	}

	.warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
</style>